<div xmlns:ext="http://www.extjs.com" class="body-wrap"><h1>Class <a href="source/Anim.html#cls-Ext.Anim">Ext.Anim</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/Anim.html#cls-Ext.Anim">Anim.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Anim.html#cls-Ext.Anim">Anim</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr></table><div class="description"><p>Ext.Anim is used to excute animations defined in <a href="output/Ext.anims.html" ext:cls="Ext.anims">Ext.anims</a>. The <a href="output/Ext.Anim.html#Ext.Anim-run" ext:member="run" ext:cls="Ext.Anim">run</a> method can take any of the 
properties defined below.</p>
<h2>Example usage:</h2>
<code><pre>
Ext.Anim.run(this, <em>'fade'</em>, {
    out: false,
    autoClear: true
});
</pre></code>
<p>Animations are disabled on Android and Blackberry by default using the <a href="output/Ext.Anim.html#Ext.Anim-disableAnimations" ext:member="disableAnimations" ext:cls="Ext.Anim">disableAnimations</a> property.</p><br><br><i>This class is a singleton and cannot be created directly.</i></div><div class="hr"></div><a id="Ext.Anim-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-autoClear"></a><b><a href="source/Anim.html#cfg-Ext.Anim-autoClear">autoClear</a></b> : Boolean<div class="mdesc">True to remove all custom CSS defined in the <a href="output/Ext.Anim.html#Ext.Anim-to" ext:member="to" ext:cls="Ext.Anim">to</a> config when the animation is over. 
(Defaults to true).</div></td><td class="msource">Anim</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-before"></a><b><a href="source/Anim.html#cfg-Ext.Anim-before">before</a></b> : Function<div class="mdesc">Code to execute before starting the animation.</div></td><td class="msource">Anim</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-delay"></a><b><a href="source/Anim.html#cfg-Ext.Anim-delay">delay</a></b> : Number<div class="mdesc">Time to delay before starting the animation. 
(Defaults to 0).</div></td><td class="msource">Anim</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-direction"></a><b><a href="source/Anim.html#cfg-Ext.Anim-direction">direction</a></b> : String<div class="mdesc">Valid values are 'left', 'right', 'up', 'down' and null. 
(Defaults to null).</div></td><td class="msource">Anim</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-disableAnimations"></a><b><a href="source/Anim.html#cfg-Ext.Anim-disableAnimations">disableAnimations</a></b> : Boolean<div class="mdesc">True to disable animations. By default, animations are disabled on Android and Blackberry</div></td><td class="msource">Anim</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-duration"></a><b><a href="source/Anim.html#cfg-Ext.Anim-duration">duration</a></b> : Number<div class="mdesc">Time in milliseconds for the animation to last. 
(Defaults to 250).</div></td><td class="msource">Anim</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-easing"></a><b><a href="source/Anim.html#cfg-Ext.Anim-easing">easing</a></b> : String<div class="mdesc"><div class="short">Valid values are 'ease', 'linear', ease-in', 'ease-out', 'ease-in-out' or a cubic-bezier curve as defined by CSS. 
(D...</div><div class="long">Valid values are 'ease', 'linear', ease-in', 'ease-out', 'ease-in-out' or a cubic-bezier curve as defined by CSS. 
(Defaults to 'ease-in-out').</div></div></td><td class="msource">Anim</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-from"></a><b><a href="source/Anim.html#cfg-Ext.Anim-from">from</a></b> : Object<div class="mdesc"><div class="short">An object of CSS values which the animation begins with. If you define a CSS property here, you must also 
define it ...</div><div class="long">An object of CSS values which the animation begins with. If you define a CSS property here, you must also 
define it in the <a href="output/Ext.Anim.html#Ext.Anim-to" ext:member="to" ext:cls="Ext.Anim">to</a> config.</div></div></td><td class="msource">Anim</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-out"></a><b><a href="source/Anim.html#cfg-Ext.Anim-out">out</a></b> : Boolean<div class="mdesc">True if you want the animation to slide out of the screen. 
(Defaults to true).</div></td><td class="msource">Anim</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-reverse"></a><b><a href="source/Anim.html#cfg-Ext.Anim-reverse">reverse</a></b> : Boolean<div class="mdesc"><div class="short">True to reverse the animation direction. For example, if the animation direction was set to 'left', it would 
then us...</div><div class="long">True to reverse the animation direction. For example, if the animation direction was set to 'left', it would 
then use 'right'. 
(Defaults to false).</div></div></td><td class="msource">Anim</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-scope"></a><b><a href="source/Anim.html#cfg-Ext.Anim-scope">scope</a></b> : Scope<div class="mdesc">Scope to run the <a href="output/before.html" ext:cls="before">before</a> function in.</div></td><td class="msource">Anim</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-to"></a><b><a href="source/Anim.html#cfg-Ext.Anim-to">to</a></b> : Object<div class="mdesc"><div class="short">An object of CSS values which the animation ends with. If you define a CSS property here, you must also 
define it in...</div><div class="long">An object of CSS values which the animation ends with. If you define a CSS property here, you must also 
define it in the <a href="output/Ext.Anim.html#Ext.Anim-from" ext:member="from" ext:cls="Ext.Anim">from</a> config.</div></div></td><td class="msource">Anim</td></tr></tbody></table><a id="Ext.Anim-props"></a><h2>Public Properties</h2><div class="no-members">This class has no public properties.</div><a id="Ext.Anim-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Anim-run"></a><b class="method"><a href="source/Anim.html#method-Ext.Anim-run">run</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Ext.Element/Element&nbsp;el</span><span class="comma">,&nbsp;</span><span title="Required" class="required">String&nbsp;anim</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Object&nbsp;config</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Used to run an animation on a specific element. Use the config argument to customize the animation</div><div class="long">Used to run an animation on a specific element. Use the config argument to customize the animation<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>el</code> : Ext.Element/Element<div class="sub-desc">The element to animate</div></li><li><code>anim</code> : String<div class="sub-desc">The animation type, defined in <a href="output/Ext.Anim.html#Ext.Anim-Ext.anims" ext:member="Ext.anims" ext:cls="Ext.Anim">Ext.anims</a></div></li><li><code>config</code> : Object<div class="sub-desc">The config object for the animation</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">Anim</td></tr></tbody></table><a id="Ext.Anim-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>